<template><!-- 动态列表 -->
    <div class="car-dynamic-list">
        <div ref="dgtools" class="filter-container">
            <div class="dgts-fm">
                <el-date-picker
                    v-model="dg.ps.date"
                    type="date"
                    placeholder="查询日期"
                    style="width: 130px"
                    value-format="yyyy-MM-dd"
                >
                </el-date-picker>

                <el-input
                    style="width: 130px"
                    placeholder="车公司名称"
                    maxlength="20"
                    v-model="dg.ps.carBelong"
                >
                </el-input>

                <el-input
                    style="width: 130px"
                    placeholder="需求座位数"
                    maxlength="5"
                    onkeyup="this.value = this.value.replace(/^(0+)|[^\d]+/g, '');"
                    v-model="dg.ps.carSeats"
                >
                </el-input>

                <el-input
                    style="width: 130px"
                    placeholder="停靠点名称"
                    maxlength="20"
                    v-model="dg.ps.stayStation"
                >
                </el-input>
                
                <el-select 
                    v-model="dg.ps.runArea" 
                    :placeholder="'可跑区域'"
                    style="width: 150px"
                >
                    <el-option
                        v-for="it in serviceTypes"
                        :key="it.val"
                        :label="it.label"
                        :value="it.val"
                    >
                    </el-option>
                </el-select>

                <el-select 
                    v-model="dg.ps.plateNum" 
                    :placeholder="'全部车牌号'"
                    style="width: 150px"
                >
                    <el-option
                        v-for="(it, i) in allCarList"
                        :key="i"
                        :label="it.label"
                        :value="it.val"
                    >
                    </el-option>
                </el-select>

                <el-select 
                    v-model="dg.ps.haveRoute" 
                    :placeholder="'有无行程'"
                    style="width: 150px"
                >
                    <el-option label="有无行程" :value="''"></el-option>
                    <el-option label="有" :value="'1'"></el-option>
                    <el-option label="无" :value="'0'"></el-option>
                </el-select>

                <el-select v-model="dg.ps.dataType" :placeholder="'数据类型'" style="width: 120px" @change="selDataType">
                    <el-option :label="'按24小时展示'" :value="'1'"></el-option>
                    <el-option :label="'按30天展示'" :value="'2'"></el-option>
                </el-select>

                <template v-if="dg.ps.dataType == 1">
                    <el-button type="primary" icon="el-icon-d-arrow-left" title="上一天" @click="get24DgList('1')"></el-button>
                    <el-button type="primary" icon="el-icon-search" @click="get24DgList('0')">今天</el-button>
                    <el-button type="primary" title="下一天" @click="get24DgList('2')"><i class="el-icon-d-arrow-right"></i></el-button>
                </template>
                <el-button type="primary" icon="el-icon-search" @click="selDataType()">搜索</el-button>
            </div>
        </div>

        <div class="car-list">
            <template v-if="dg.ps.dataType == 1">
                <span v-if="dg.list24.length == 0" class="c-gray">没有空车数据！</span>
                <template v-else>
                    <ul>
                        <li>
                            <label><span>车牌号 / 座位数</span></label>
                            <label><span>师傅姓名</span></label>
                            <label class="lab-24"><span>停靠点</span><u>0</u></label>
                            <label class="lab-24" v-for="h in 24" :key="h">
                                <u v-if="h < 10">0{{h}}</u>
                                <u v-else>{{h}}</u>
                            </label>
                        </li>
                    </ul>
                    <ul>
                        <li v-for="(it, i) in dg.list24" :key="i">
                            <label :title="'编号 '+(i+1)"><span>{{it.plateNum}} / <b>{{it.seats}}</b></span></label>
                            <label><span :class="{'c-gray': it.driverInfo == '无主驾' ? true : false}">{{it.driverInfo}}</span></label>
                            <label>
                                <el-tooltip :disabled="it.address.length <= 10" placement="top">
                                    <div slot="content">{{it.address}}</div>
                                    <span>{{it.address}}</span>
                                </el-tooltip>
                            </label>
                            <label class="lab-24" v-for="h in 24" :key="h"></label>

                            <template v-if="it.orders">
                                <i v-for="(r, index) in it.orders" :key="'_'+index" :style="{'left': r.left, 'width': r.width, 'background': (index+1)%2 == 0 ? '#91cc75' : '#5470c6'}">
                                    <el-tooltip placement="top" :popper-class="'route-tips'">
                                        <div slot="content" v-html="r.tips.replace(/@/g, '；<br />').replace(/\n/g, '；<br />')"></div>
                                        <span>{{r.view.replace(/@/g, ' ')}}</span>
                                    </el-tooltip>
                                </i>
                            </template>
                        </li>
                    </ul>
                </template>
            </template>

            <template v-else>
                <span v-if="dg.list30.length == 0" class="c-gray">没有空车数据！</span>
                <template v-else>
                    <ul>
                        <li>
                            <label><span>车牌号 / 座位数</span></label>
                            <label><span>师傅姓名</span></label>
                            <label><span>师傅手机</span></label>
                            <label class="lab-30" v-for="h in 30" :key="h">
                                <u v-if="h < 10">0{{h}}</u>
                                <u v-else>{{h}}</u>
                            </label>
                        </li>
                    </ul>
                    <ul>
                        <li v-for="(it, i) in dg.list30" :key="i">
                            <label><span>{{it.carMap.plateNum}} / <b>{{it.carMap.seats}}</b></span></label>
                            <label><span :class="{'c-gray': it.carMap.driverInfo == '无主驾' ? true : false}">{{it.carMap.driverInfo.split('/')[0]}}</span></label>
                            <label>
                                <span>{{it.carMap.driverInfo.split('/')[1]}}</span>
                            </label>
                            <label class="lab-30" v-for="h in 30" :key="h">
                                <!-- <span v-if="it.carMap.ds[h]" :title="it.carMap.ds[h]">{{it.carMap.ds[h]}}</span> -->

                                <template v-if="it.carMap.ds[h]">
                                    <el-tooltip v-if="it.carMap.ds[h].length > 3" placement="top">
                                        <span slot="content">{{it.carMap.ds[h]}}</span>
                                        <span>{{it.carMap.ds[h]}}</span>
                                    </el-tooltip>
                                    <template v-else>{{it.carMap.ds[h]}}</template>
                                </template>
                            </label>
                        </li>
                    </ul>
                </template>
            </template>
        </div>
    </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog';

import * as carService from '@/api/services/car.service';

export default {
  name: 'CarDynamicList',
  mixins: [ ],
  directives: { elDragDialog },
  components: { },
  data() {
    return {
        // 业务类型
        serviceTypes: [ 
            {val: '', label: '可跑区域（全部）'},
            {val: 'COUNTY_SER', label: '县际业务'},
            {val: 'CITY_SER', label: '市际业务'},
            {val: 'PROVINCE_SER', label: '省际业务'},
        ],
        // 所有车辆列表
        allCarList: [],
        dg: {// 数据列表参数
            tbName: 'carDynamicListTb',
            list24: [],
            list30: [],
            ps: { // 过滤参数
                page: 1, rows: 20,
                // 查询日期
                date: '',
                // 公司名称
                carBelong: '',
                // 需求座位数
                carSeats: '',
                // 停靠点名称
                stayStation: '',
                // 可跑区域
                runArea: '',
                // 查询哪一天
                whichDay: '',
                // 查询车牌号
                plateNum: '',
                // 有无行程 0-无 1-有
                haveRoute: '',
                // 数据类型 1-24小时 2-30天
                dataType: '1',
            },
            
        }               
    }
  },
  created() {
    const that = this;

    that.get24DgList();
  },
  methods:{
    /**
     * 获取-背景颜色
     * @param state 车辆状态 0是正常，大于0就是订单数，repair是维修，leave是请假
     * @param text 说明文本
     */
    getBgColor(state, text){
        const that = this;

        let kv = {
            // 正常
            zc: '#FFFFFF',
            // 出车
            cc: '#FF6666',
            // 无主驾
            wzj: '#66CCFF',
            // 驾驶员休假
            xj: 'FF00FF',
            // 车辆维修
            wx: 'FFFF00'
        };

        let res = kv['zc']; // 颜色结果 默认正常
        if(!that.FV.isNumber(state)){
            // 状态码不是数字
            if(state == 'repair'){
                res = kv['wx'];
            }else if(state == 'leave'){
                res = kv['xj'];
            }
        }else{
            // 状态码是数字
            let _state = parseInt(state);

            if(_state > 0 && text == '无主驾'){
                res = kv['wzj'];
            }else if(_state > 0 && text != '无主驾'){
                res = kv['cc'];
            }
        }

        return res;
    },
    /**
     * 处理列表数据
     * @param type 数据类型 1-24小时；2-30天；
     * @param day  增加天数（相对今天）
     */
    getFilterData(list, type, day){
        const that = this, U = that.U;
        
        if(type == 1){
            // let fullWidth = U.fullWidth(536);
            // console.log('浏览器可视宽度', fullWidth);

            // 1小时的宽度
            let hWidth = '(100% - 320px)/24';
            // console.log('每小时的宽度', hWidth);

            // 最小偏移量
            let minLeft = 309;
            
            list.forEach((it, i) => {
                let os = it.orders;
                // console.log('当前车辆'+i, os);
                if(os){// 存在车辆行程
                    
                    os.forEach(o => {
                        if(!o.stime || !o.etime){
                            console.error('数据存在问题：起止时间问题', i+1, it);
                        }else{
                            // 行程起止时间
                            let st = U.str2date(o.stime), et = U.str2date(o.etime);
                            // 当天起止时间
                            let cst = U.str2date(U.getSEToday(day)[0]), cet = U.str2date(U.getSEToday(day)[1]);

                            let h = 0;
                            // 计算左边偏移量
                            if(st <= cst){
                                // 行程开始时间小于或等于当天开始时间
                                o.left = `${minLeft}px`;
                            }else{
                                // 获取开始时间距离当天开始时间多少小时
                                h = U.num((st.getTime() - cst.getTime())/1000/60/60, 4);
                                o.left = `calc(${hWidth}*${h} + ${minLeft}px)`;
                            }

                            // 计算宽度（4种情况，起止时间在尾部交叉当天、起止时间在当天中、起止时间头部交叉当天）
                            if(st < cst && et <= cet){
                                // 行程开始时间 < 当天开始时间 && 行程结束时间 <= 当天结束时间

                                // 小时 = (行程结束时间 - 当天开始时间)/1000/60/60
                                h = U.num((et.getTime() - cst.getTime())/1000/60/60, 4);
                            }else if(st >= cst && et > cet){
                                // 行程开始时间 >= 当天开始时间 && 行程结束时间 > 当天结束时间

                                // 小时 = (行程结束时间 - 行程开始时间)/1000/60/60
                                h = U.num((cet.getTime() - st.getTime())/1000/60/60, 4);
                            }else if(st >= cst && et <= cet){
                                // 行程开始时间 >= 当天开始时间 && 行程结束时间 <= 当天结束时间

                                // 小时 = (当天结束时间 - 当天开始时间)/1000/60/60
                                h = U.num((et.getTime() - st.getTime())/1000/60/60, 4);
                            }else{
                                // 行程开始时间 <= 当天开始时间 && 行程结束时间 >= 当天结束时间

                                // 小时 = (当天结束时间 - 当天开始时间)/1000/60/60
                                h = U.num((cet.getTime() - cst.getTime())/1000/60/60, 4);
                            }

                            o.width = `calc(${hWidth}*${h})`;
                            // console.log(i+'偏移量/宽度分钟数', o.stime, o.etime, h, o.left, o.width);
                        }
                    });
                }
            });
        }else if(type == 2){
            list.forEach((it, i) => {
                let ds = it.carMap.dayList;

                it.carMap.ds = {};// 定义一个新对象
                ds.forEach(dit => {
                    if(dit.other != 0) it.carMap.ds[dit.id] = dit.other;
                });
            });
        }

        // console.log('最终列表数据', list);
        return list;
    },
    /**
     * 获取数据列表
     * @param day 时间天数（相对当天）
     */
    get24DgList(day){
        let that = this, U = that.U, ps = U.scopy(that.dg.ps), todayDate = U.getSEToday()[0].split(' ')[0];
        
        if(day){// 存在天数，按天数查询
            // 基础日期 如查询日期不为空，则为查询日期，否则为当天日期
            let baseDate = ps.date ? ps.date : todayDate;
            if(day == 1){
                // 上一天：相对基础日期的上一天
                let prevDay = U.addDayForTime(baseDate, -1);

                // 天数 = 上一天 - 今天 （负数）
                day = U.getSEDifferDay(todayDate, prevDay);
            }else if(day == 2){
                // 下一天：相对基础日期的下一天
                let nextDay = U.addDayForTime(baseDate, 1);

                // 天数 = 下一天 - 今天
                day = U.getSEDifferDay(todayDate, nextDay);
            }else{// 今天：就是今天
                day = 0;
            }

            let setime = U.getSEToday(day);
            ps.usTime = setime[0].split(' ')[0];
            ps.ueTime = setime[1].split(' ')[0];

            // 回填查询日期
            that.dg.ps.date = ps.usTime;
        }else{// 不存在天数，按日期查询
            if(ps.date){
                ps.usTime = ps.date;
                ps.ueTime = ps.date;
                
                // 查询第几天的=结束日期-当前日期
                day = U.getSEDifferDay(todayDate, ps.date);
            }else{
                ps.usTime = todayDate;
                ps.ueTime = todayDate;

                day = 0;

                // 回填查询日期
                that.dg.ps.date = ps.usTime;
            }
        }
        console.log('当前天数', day);
        let loading = U.qloading('数据请求中...');
        carService.getCarDynamicList(ps).then(res => {
            U.qclose(loading);

            if(!res || res.code != 1){
                that.U.qerror('数据请求失败');
            }else{
                that.dg.list24 = that.getFilterData(res.data, 1, day);
            }
        }).catch(() => { U.qclose(loading); });
    },
    /**
     * 获取-30天数据列表
     */
    get30DgList(){
        const that = this, ps = that.U.scopy(that.dg.ps);

        if(ps.date){
            ps.usTime = ps.date;
            ps.ueTime = ps.date;
        }else{
            ps.usTime = '';
            ps.ueTime = '';
            delete ps.date;
        }
        
        let loading = that.U.qloading('数据请求中...');
        carService.getCar30DynamicList(ps).then(res => {
            that.U.qclose(loading);

            if(!res || res.code != 1){
                that.U.qerror('数据请求失败');
            }else{
                that.dg.list30 = that.getFilterData(res.data, 2, 0);
            }
        }).catch(() => { that.U.qclose(loading); });
    },
    /** 选择-数据类型事件 */
    selDataType(e){
        const that = this;

        if(!e) e = that.dg.ps.dataType;

        console.log('数据状态', e);

        if(e == 1){
            that.get24DgList();
        }else{
            that.get30DgList();
        }
    },

  }
 }
</script>

<style>
.route-tips{
    max-width: 500px !important;
}
</style>

<style lang="less" scoped>
    .car-dynamic-list ::v-deep{

        @borderColor: #1890ff;
        .car-list{
            position: relative;

            ul:first-child{
                overflow-y: hidden !important;
                margin-right: 10px;

                // 第一行
                &:first-child{
                    label{
                        border-top: 1px solid @borderColor;
                    }
                    
                    label.lab-24:nth-child(n+3){
                        u{
                            position: absolute;
                            top: -5px;
                            right: -7px;
                            text-decoration: none;
                        }
                    }

                    // 0点时样式
                    label:nth-child(3){
                        u{
                            right: -4px;
                        }
                    }

                    label.lab-30:nth-child(n+3){
                        u{
                            position: absolute;
                            top: -5px;
                            right: 15px;
                            text-decoration: none;
                        }
                    }
                }
            }

            ul{
                // max-height: calc(100vh - 160px);
                max-height: calc(100vh - 180px);
                overflow-y: auto; 
                overflow-x: hidden;
                margin: 0;
                padding: 0;

                li{
                    list-style: none;
                    height: 25px;
                    position: relative;

                    i{
                        position: absolute;
                        top: 0px;
                        height: 24px;
                        line-height: 24px;
                        font-style: normal;
                        display: inline-block;
                        text-align: left;
                        font-size: 12px;
                        text-decoration: none;
                        background: #1890ff;
                        color: #fff;
                        
                        span{
                            cursor: default;
                            display: inline-block;
                            height: 100%;
                            width: 100%;
                            
                            &:hover{
                                opacity: 0.7;
                            }
                        }
                    }

                    label{
                        position: relative;
                        font-size: 12px;
                        display: inline-block;
                        height: 25px;
                        line-height: 32px;
                        font-weight: normal;
                        text-align: center;
                        border-right: 1px solid @borderColor;
                        border-bottom: 1px solid @borderColor;
                    }

                    label:nth-child(1){
                        width: 100px;
                        border-left: 1px solid @borderColor;
                        padding-left: 20px;
                        position: relative;
                    }

                    label:nth-child(2){
                        width: 60px;
                    }

                    label:nth-child(3){
                        width: 150px !important;
                        text-align: left;
                        
                        span{
                            display: inline-block;
                            width: 100%;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                    }

                    label:nth-child(n-3){
                        span{
                            position: absolute;
                            top: -3px;
                            left: 0px;
                        }
                    }

                    // // 第一行
                    // &:first-child{

                    //     label{
                    //         border-top: 1px solid @borderColor;
                    //     }
                        
                    //     label.lab-24:nth-child(n+3){
                    //         u{
                    //             position: absolute;
                    //             top: -5px;
                    //             right: -7px;
                    //             text-decoration: none;
                    //         }
                    //     }

                    //     // 0点时样式
                    //     label:nth-child(3){
                    //         u{
                    //             right: -4px;
                    //         }
                    //     }

                    //     label.lab-30:nth-child(n+3){
                    //         u{
                    //             position: absolute;
                    //             top: -5px;
                    //             right: 15px;
                    //             text-decoration: none;
                    //         }
                    //     }
                    // }

                    // 最后一行
                    // &:last-child label{
                        
                    // }

                    // 每行第三列之后
                    // label:nth-child(n+3){
                    //     width: calc((100% - 320px)/30);
                    // }

                    .lab-24{
                        width: calc((100% - 320px)/24);
                    }

                    .lab-30{
                        width: calc((100% - 320px)/30);
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;

                        span{
                            display: inline-block;
                            height: 100%;
                            width: 100%;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                    }
                }
            }
        }
        
    }
</style>